<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="服务详情"
    width="730px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">服务名称:</span>
          <span class="value">{{ form.name }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">服务类型:</span>
          <span class="value">{{
            getDictValue('tcfwlx', form.serviceType)
          }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">服务地址:</span>
          <span class="value">{{ form.serviceUrl }}</span>
        </el-col>
        <!-- <el-col :span="12">
          <span class="label">服务编码:</span>
          <span class="value">{{ form.code }}</span>
        </el-col> -->
        <el-col :span="12">
          <span class="label">数据服务地址:</span>
          <span class="value">{{ form.dataService }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">图例服务地址:</span>
          <span class="value">{{ form.signService }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">显示排序:</span>
          <span class="value">{{ form.orderIndex }}</span>
        </el-col>
        <!-- <el-col :span="12">
          <span class="label">是否默认加载:</span>
          <span class="value">{{ form.isDefault === 1 ? '是' : '否' }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">是否启用:</span>
          <span class="value">{{ form.status === 1 ? '是' : '否' }}</span>
        </el-col> -->
      </el-row>
    </div>
    <div class="map">
      <MapboxMap
        :map-id="mapId"
        @after-map-loaded="afterMapLoaded"
        @before-map-destroyed="beforeMapDestroyed"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useDict } from '@/hooks/useDict'
import { layerDetail } from '@/api/manager/dataManage/layerManage.js'
import MapboxMap from '@/components/mapbox-map.vue'
import { nanoid } from 'nanoid'

const { dict, getDictValue, getDictStyle } = useDict(['serviceType', 'tcfwlx'])
const mapId = nanoid()

let _map
let _marker
let _popup

let markers = []

const afterMapLoaded = async (id, map) => {
  _map = map
  resizeMap()
}

const beforeMapDestroyed = (id, map) => {}

const resizeMap = () => {
  setTimeout(() => {
    _map?.resize()
  })
}
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
const form = ref({})
const handleDetail = async () => {
  const res = await layerDetail({ resourceId: props.detail.pkid })
  form.value = res.data
}
watch(
  () => props.detail,
  () => {
    if (props.detail.pkid && dialogVisible.value) {
      handleDetail()
    }
  },
)
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.custom-detail {
  .label {
    flex-shrink: 0;
  }

  .value {
    flex: 1;
    word-break: break-all;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
}
</style>
